<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        function Element (tagName, props, children) {
          this.tagName = tagName;
          this.props = props;
          this.children = children || [];
        }
        Element.prototype.render = function(){
            var el = document.createElement(this.tagName);
            var props = this.props;
            for(var propName in props){
                var propValue = props[propName];
                el.setAttribute(propName, propValue);
            }
            var children = this.children;
            children.forEach(function(child){
                var childEl = child instanceof Element? child.render() : document.createTextNode(child);
                el.appendChild(childEl);
            })
            return el;
        }
        function el(tagName, props, children) {
          return new Element(tagName, props, children)
        }

        var ul = el('ul', {id: 'list'}, [
          el('li', {class: 'item'}, [
            'Item 1',
            el('p', {onclick: 'commit(\'lkb\')'}, ['click'])
          ]),
          el('li', {class: 'item'}, ['Item 2']),
          el('li', {class: 'item'}, ['Item 3'])
        ])

        var ulRoot = ul.render()
        document.body.appendChild(ulRoot)
        function commit(name){alert(name);}
    </script>

</body>
</html>